<template>
  <div class="left-card">
    <m-card title="当日订单" :height="300">
      <div class="title">
        <span>服务区</span>
        <span>充电站</span>
        <span>订单金额</span>
        <span>订单时间</span>
      </div>
      <vue3ScrollSeamless
        class="scroll-wrap"
        :classOptions="classOptions"
        :dataList="list"
      >
        <ul class="ui-wrap">
          <li class="li-item" v-for="(item, i) of list" :key="i">
            <p>{{ item.fwq }}</p>
            <p>{{ item.cdz }}</p>
            <p>{{ item.ddje }}</p>
            <p>{{ item.time }}</p>
          </li>
        </ul>
      </vue3ScrollSeamless>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, onBeforeUnmount } from "vue";
import mCard from "@/components/mCard/index.vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
let list = reactive([
  {
    fwq: "服务区1",
    cdz: "充电站1",
    ddje: "29.32",
    time: "2019-03-07",
  },
  {
    fwq: "服务区2",
    cdz: "充电站12",
    ddje: "16.39",
    time: "2019-03-07",
  },

  {
    fwq: "服务区1",
    cdz: "充电站1",
    ddje: "29.32",
    time: "2019-03-07",
  },
  {
    fwq: "服务区2",
    cdz: "充电站12",
    ddje: "16.39",
    time: "2019-03-07",
  },

  {
    fwq: "服务区1",
    cdz: "充电站1",
    ddje: "29.32",
    time: "2019-03-07",
  },
  {
    fwq: "服务区2",
    cdz: "充电站12",
    ddje: "16.39",
    time: "2019-03-07",
  },

  {
    fwq: "服务区1",
    cdz: "充电站1",
    ddje: "29.32",
    time: "2019-03-07",
  },
  {
    fwq: "服务区2",
    cdz: "充电站12",
    ddje: "16.39",
    time: "2019-03-07",
  },

  {
    fwq: "服务区1",
    cdz: "充电站1",
    ddje: "29.32",
    time: "2019-03-07",
  },
  {
    fwq: "服务区2",
    cdz: "充电站12",
    ddje: "16.39",
    time: "2019-03-07",
  },

  {
    fwq: "服务区1",
    cdz: "充电站1",
    ddje: "29.32",
    time: "2019-03-07",
  },
  {
    fwq: "服务区2",
    cdz: "充电站12",
    ddje: "16.39",
    time: "2019-03-07",
  },
]);
const classOptions = {
  limitMoveNum: 6,
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-around;
  background-color: #209dc5;
  line-height: 1.8em;
  color: white;
}
.scroll-wrap {
  height: 100%;
  width: 360px;
  margin: 0 auto;
  overflow: hidden;
}
.ui-wrap {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}
.li-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: center;
  line-height: 2em;
  color: #209dc5;
  // &:nth-child(odd) {
  //   background-color: #269ec7;
  // }
  p {
    flex: 1;
    white-space: nowrap; // 文字强制不换行
    text-overflow: ellipsis; // 文字溢出换省略号
    overflow: hidden; // 溢出文字隐藏
  }
}
</style>
